<template>
	<view>
		<view class="box">
			<!-- 日期选择 -->
			<scroll-view class="box_time" scroll-x>
				<view :class="item.active ? 'rq_active box_time_item' : 'box_time_item'" v-for="item,index in time"
					:key="index" @click="clickTabls(item, index)">
					<view :class="item.active ? 'rq_text_active' : ''">{{ item.week }}</view>
					<view :class="item.active ? 'rq_text_active' : ''">
						{{ item.date }}
						<text>{{ item.fullDate === nowDate ? '(今)' : '' }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- 场次选择 -->
			<view class="box_cc" v-if="list.length != 0">
				<view class="box_cc_date">
					<view class="box_cc_date_item"><text></text></view>
					<view class="box_cc_date_item" v-for="item,index in timeList" :key="index">
						<text>{{ item.beginTime + '-' + item.endTime }}</text>
					</view>
				</view>
				<scroll-view class="box_cc_xm" scroll-x>
					<view class="box_cc_xm_box" v-for="item,index in list" :key="index">
						<view class="box_cc_xm_box_item fb">{{item.siteModelName}}</view>
						<view class="box_cc_xm_box_item"
							:class="items.status >= 6 ? 'off': items.Active ? 'active_background' : ''"
							v-for="(items,indexs) in item.sites" :key="indexs" @click="clickItem(item, items,indexs, index)">
							<text
								v-if="items.status != '1' && items.status != '2' && items.status != '3' && items.status != '4' && items.status != '5'"
								:class="items.status >= 6 ? 'active_font_color':items.status!= 0?'active_font_colors':''">￥{{items.price}}</text>
							<image v-if="items.status == '3'" class="lock"
								:src="items.Active?'/static/images/ic_lock_sel.png':'/static/images/ic_lock.png'">
							</image>
							<text
								v-if="items.status == '1' || items.status == '2' || items.status == '4' || items.status == '5'"
								class="yudin">预</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 空数据展示 -->
			<view class="no-list" v-if="!list || list.length == 0">
				<image src="@/static/images/default_empty.png"></image>
				<view>暂无数据</view>
			</view>
			<view class="seizeAseat"></view>
			<!-- 底部总金额+提交 -->
			<view class="box_active_footer">
				<view v-if="siteIds.length == 0" class="smBox" :class="ghcd?'wu':''">
					<view>
						<text></text>
						已选择
					</view>
					<view>
						<text></text>
						不可选
					</view>
				</view>
				<scroll-view v-if="reserveForm&&reserveForm.length>0" scroll-x>
					<view class="box_active_content">
						<view class="box_active_content_item" v-for="item,index in reserveForm" :key="index">
							<view class="box_active_content_item_name">
								<text class="mr10">{{ item.siteModelName }}</text>
								<u-icon name="close" size="24rpx" color="#ffffff" @click="delXZ(item,index)"></u-icon>
							</view>
							<view class="box_active_content_item_time">{{ item.beginTime }}-{{ item.endTime }}</view>
						</view>
					</view>
				</scroll-view>
				<view v-if="status!='' && !ghcd && siteIds.length > 0" class="box_active_footer_btn flex-cb">
					<view>
						<text v-if="status == '1' || status == '2' || status == '4' || status == '5'"
							@click="switchCourt">换场</text>
						<text v-if="status == '1' || status == '2'" @click="edit">修改预定</text>
						<text v-if="status == 3" @click="siteLockStatusb">解锁</text>
						<text v-if="status == 0" @click="siteLockStatus">锁场</text>
						<text v-if="status == 0" @click="siteFixedReserve">固定预定</text>
					</view>
					<view>
						<text v-if="status == '1' || status == '2' || status == '4' || status == '5'" class="rightBtn"
							@click="cancelReserveBtn">取消预定</text>
						<text v-if="status == 0 && siteIds.length >= 1" class="rightBtn" @click="submit">预定下单</text>
					</view>
				</view>
				<view v-if="siteIds.length == 0 && !ghcd" class="box_active_footer_btn flex-cb">
					<view><text @click="siteLockStatusc">锁场</text></view>
				</view>
				<view v-if="siteIds.length > 0 && ghcd" class="box_active_footer_btn"><text class="red" @click="switchCourts">更换场地</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getYMDHMS
	} from '@/utils/utils.js';
	export default {
		data() {
			return {
				itemId: '',
				cqid: '',
				xmid: '',
				daysCount: '',
				title: '',
				maxDay: '',
				time: [],
				Date: '',
				timeList: [],
				list: [],
				siteIds: [],
				siteId: '',
				reserveForm: [],
				price: 0,
				status: '',
				reserveAndOrderId: '',
				ghcd: false,
				nowDate: getYMDHMS(new Date()).slice(0, 10)
			};
		},
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: options.title
			});
			this.cqid = options.cqid
			this.xmid = options.xmid
			this.title = options.title
			this.siteId = options.siteId
			if (options.ghcd) {
				this.ghcd = options.ghcd
			}
		},
		onShow() {
			setTimeout(()=> {
				this.reserveForm = []
				this.siteIds = []
				this.status = ''
				this.getDate();
			}, 300)
		},
		methods: {
			siteReserve() {
				this.$app.ajax({
					data: {
						param: {
							siteId: this.siteIds[0]
						}
					},
					api: this.$api.siteReserve()
				}).then(res => {
					this.reserveAndOrderId = res.record.id
				});
			},
			delXZ(e, index) {
				let num = index;
				var list = [...this.list];
				let siteIds =  [...this.siteIds];
				let reserveForm = [...this.reserveForm];
				reserveForm.splice(num, 1);
				siteIds.splice(num, 1);
				for (let i = 0; i < list.length; i++) {
					for (let s = 0; s < list[i].sites.length; s++) {
						if (siteIds.length > 0 && siteIds.indexOf(list[i].sites[s].id) != -1) {
							list[i].sites[s].Active = true;
						} else {
							list[i].sites[s].Active = false;
						}
					}
				}
				this.siteIds = siteIds
				this.reserveForm = reserveForm
				this.list = list
			},

			cancelReserveBtn() {
				let that = this;
				if (this.status === '1' || this.status === '4') {
					this.$app.ajax({
						data: {
							param: {
								reserveAndOrderId: this.reserveAndOrderId
							}
						},
						api: this.$api.cancelReserve()
					}).then(res => {
						if (res.errorCode === '000000') {
							uni.showToast({
								title: '取消成功',
								icon: 'success',
								duration: 1000,
								success(res) {
									setTimeout(() => {
										that.reserveForm = []
										that.siteIds = []
										that.status = ''
										that.sessionList();
									}, 100);
								}
							});
						}
					});
				} else if (this.data.status === '2' || this.data.status === '5') {
					this.$app.ajax({
						data: {
							param: {
								reserveAndOrderId: this.reserveAndOrderId
							}
						},
						api: this.$api.unsubscribeOrder()
					}).then(res => {
						if (res.errorCode === '000000') {
							uni.showToast({
								title: '退订成功',
								icon: 'success',
								duration: 1000,
								success(res) {
									setTimeout(() => {
										that.reserveForm = []
										that.siteIds = []
										that.status = ''
										that.sessionList();
									}, 100);
								}
							});
						}
					});
				}
			},
			siteLockStatusb() {
				let that = this;
				this.$app.ajax({
					data: {
						param: {
							type: 1,
							projectId: this.xmid,
							siteIds: this.siteIds
						}
					},
					api: this.$api.siteLockStatus()
				}).then(res => {
					if (res.errorCode === '000000') {
						uni.showToast({
							title: '解锁成功',
							icon: 'success',
							duration: 1000,
							success(res) {
								that.reserveForm = []
								that.siteIds = []
								that.status = ''
								that.sessionList();
							}
						});
					}
				});
			},
			siteLockStatus() {
				let that = this;
				this.$app.ajax({
					data: {
						param: {
							type: 0,
							projectId: this.xmid,
							siteIds: this.siteIds
						}
					},
					api: this.$api.siteLockStatus()
				}).then(res => {
					if (res.errorCode === '000000') {
						uni.showToast({
							title: '锁场成功',
							icon: 'success',
							duration: 1000,
							success(res) {
								that.reserveForm = []
								that.siteIds = []
								that.status = ''
								that.sessionList();
							}
						});
					}
				});
			},
			clickItem(item, items, z, f) {
				var list = [...this.list];
				let siteIds = [...this.siteIds];
				let reserveForm = [...this.reserveForm];
				if (this.list[f].sites[z].status != 0) {
					if (this.list[f].sites[z].status < 6 && !this.ghcd) {
						if (this.status === this.list[f].sites[z].status && this.status == 3) {
							let pd = true;
							for (let num = 0; num < reserveForm.length; num++) {
								if (reserveForm[num].id === items.id && reserveForm.length > 0) {
									reserveForm.splice(num, 1);
									siteIds.splice(num, 1);
									pd = false;
								}
							}
							if (pd) {
								siteIds.push(items.id);
								reserveForm.push({...item,...items});
							}
						} else {
							siteIds = [];
							reserveForm = [];
							siteIds.push(items.id);
							reserveForm.push({...item,...items});
						}
						this.status = this.list[f].sites[z].status
						this.siteIds = siteIds
						this.reserveForm = reserveForm

						if (this.list[f].sites[z].status != 3) {
							this.siteReserve();
						}
					}
				} else {
					if (this.status != '0') {
						siteIds = [];
						reserveForm = [];
						siteIds.push(items.id);
						reserveForm.push({...item,...items});
						this.status = this.list[f].sites[z].status
					} else if (siteIds.length === 0) {
						siteIds.push(items.id);
						reserveForm.push({...item,...items});
					} else {
						let pd = true;
						for (let num = 0; num < reserveForm.length; num++) {
							if (reserveForm[num].id === items.id && reserveForm.length > 0) {
								reserveForm.splice(num, 1);
								siteIds.splice(num, 1);
								pd = false;
							}
						}
						if (pd) {
							siteIds.push(items.id);
							reserveForm.push({...item,...items});
						}
					}
					this.siteIds = siteIds
					this.reserveForm = reserveForm
				}
				for (let i = 0; i < list.length; i++) {
					for (let s = 0; s < list[i].sites.length; s++) {
						if (siteIds.length > 0 && siteIds.indexOf(list[i].sites[s].id) != -1) {
							list[i].sites[s].Active = true;
						} else {
							list[i].sites[s].Active = false;
						}
					}
				}
				this.list = list
			},

			// 获取场次列表
			sessionList() {
				this.$app.ajax({
					data: {
						userId: uni.getStorageSync('userId'),
						param: {
							areaId: this.cqid,
							day: this.Date,
							projectId: this.xmid
						}
					},
					api: this.$api.sessionList()
				}).then(res => {
					for (let i = 0; i < res.recordList.length; i++) {
						for (let s = 0; s < res.recordList[i].sites.length; s++) {
							res.recordList[i].sites[s].Active = false;
						}
					}
					this.timeList = res.recordList[0] ? res.recordList[0].sites : [],
						this.list = res.recordList
				});
			},
			clearList() {
				var list = [...this.list];
				for (let i = 0; i < list.length; i++) {
					for (let s = 0; s < list[i].sites.length; s++) {
						list[i].sites[s].Active = false;
					}
				}
				this.status = ''
				this.siteIds = []
				this.reserveForm = []
				this.list = list
			},

			// 获取最大时间
			getDate() {
				this.$app.ajax({
					data: {
						userId: uni.getStorageSync('userId'),
						param: {
							areaId: this.cqid,
							projectId: this.xmid
						}
					},
					api: this.$api.getDate()
				}).then(res => {
					if (res.errorCode !== '000000') return
					var myDate = new Date();
					let n = String(myDate.getFullYear());
					let y = String(Number(myDate.getMonth()) + 1).length == 1 ? 0 + String(Number(myDate
						.getMonth()) + 1) : String(Number(myDate.getMonth()) + 1);
					let r = String(Number(myDate.getDate())).length == 1 ? 0 + String(Number(myDate.getDate())) :
						String(Number(myDate.getDate()));
					this.daysCount = res.record.daysCount
					this.maxDay = n + '-' + y + '-' + r

					this.get7Days();
				});
			},

			// 提交订单
			submit() {
				if (this.siteIds.length === 0)
					return uni.showToast({
						title: '请选择场次',
						icon: 'none',
						duration: 2000
					});
				// 生成订单
				uni.navigateTo({
					url: `/pages/fieldArea/orderConfirm?list=${JSON.stringify(this.reserveForm)}&idList=${JSON.stringify(this.siteIds)}`
				});
			},
			siteLockStatusc() {
				uni.navigateTo({
					url: `/pages/fieldArea/lock?id=${this.xmid}`
				});
			},
			edit() {
				if (this.siteIds.length === 0)
					return uni.showToast({
						title: '请选择场次',
						icon: 'none',
						duration: 2000
					});
				// 生成订单
				uni.navigateTo({
					url: `/pages/fieldArea/orderEdit?siteId=${this.siteIds[0]}`
				});
			},
			switchCourt() {
				if (this.siteIds.length === 0)
					return uni.showToast({
						title: '请选择场次',
						icon: 'none',
						duration: 2000
					});
				// 生成订单
				uni.navigateTo({
					url: `/pages/fieldArea/switchCourt?siteId=${this.siteIds[0]}&title=${this.title}&xmid=${this.xmid}&cqid=${this.cqid}`
				});
			},
			siteFixedReserve() {
				uni.navigateTo({
					url: `/pages/fieldArea/fixedReservation?list=${JSON.stringify(this.reserveForm)}&xmid=${this.xmid}&siteId=${JSON.stringify(this.siteIds)}`
				});
			},
			switchCourts() {
				// var pages = getCurrentPages();
				// var prevPage = pages[pages.length - 2]; // 上一个页面
				// let reserveForm = [...this.reserveForm]
				// reserveForm.forEach((s)=> {
				// 	s.sites = null
				// })
				// prevPage.setData();
				uni.$emit("callback", {
					siteId: this.siteId,
					title: this.siteId,
					xmid: this.xmid,
					cqid: this.cqid,
					listb: this.reserveForm,
					idList: this.siteIds
				});
				uni.navigateBack({
					delta: 1
				})
			},

			// 切换日期
			clickTabls(item, index) {
				if (item.id == this.Date) return;
				console.log(item)
				var arr = [];
				for (let i = 0; i < this.time.length; i++) {
					if (i == index) {
						this.time[i].active = true;
					} else {
						this.time[i].active = false;
					}
					arr.push(this.time[i]);
				}
				this.time = arr
				this.list = []
				this.Date = item.id
				this.itemId = ''
				this.reserveForm = []
				this.siteIds = []
				this.status = ''
				this.Date = item.fullDate
				this.sessionList();
			},

			// 获取日期数组
			get7Days() {
				var now = new Date(this.maxDay);
				var nowTime = now.getTime();
				var oneDayTime = 24 * 60 * 60 * 1000;
				var dataArr = [];
				for (var i = 0; i < this.daysCount; i++) {
					//显示周一
					var ShowTime = nowTime + i * oneDayTime;
					//初始化日期时间
					var myDate = new Date(ShowTime);
					var year = myDate.getFullYear();
					var month = myDate.getMonth() + 1;
					if (month < 10) {
						month = '0' + month;
					}
					var date = myDate.getDate();
					if (date < 10) {
						date = '0' + date;
					}
					var fullDate = year + '-' + month + '-' + date;
					var str = '周' + '日一二三四五六'.charAt(myDate.getDay());
					let arr = {
						week: str,
						date: date,
						fullDate: fullDate,
						active: false
					};
					dataArr.push(arr);
				}
				dataArr[0].active = true;
				dataArr[0].today = true;
				this.time = dataArr
				this.Date = dataArr[0].fullDate
				this.sessionList();
			}
		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	/* -----------------场次激活等样式----------------------- */
	.active_font_color {
		color: #fff !important;
	}

	.active_font_colors {
		color: #DD5040 !important;
	}

	.active_background {
		position: relative !important;
		background: #4167C1 !important;
	}

	/* .active_background image {
  width: 40rpx;
  height: 40rpx;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
} */

	.active_background text {
		color: #ffffff !important;
	}

	/* -----------------------结束--------------------------- */

	.box_time {
		height: 130rpx;
		white-space: nowrap;
	}

	.box_time_item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: calc(100% / 7);
		height: 100%;
		background: #F7F7F7;
	}

	.box_time_item view:nth-child(1) {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.box_time_item view:nth-child(2) {
		font-size: 28rpx;
		font-weight: 600;
		color: #222222;
		margin-top: 10rpx;
	}

	.box_time_item view:nth-child(2) text {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.rq_active {
		background: #4167C1;
	}

	.rq_text_active {
		color: #FFFFFF !important;
	}

	.box_cc {
		display: flex;
	}

	.box_cc_date {
		width: 180rpx;
		display: flex;
		flex-shrink: 0;
		flex-direction: column;
	}

	.box_cc_date_item {
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.box_cc_date_item text {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}

	.box_cc_xm {
		margin-left: 10rpx;
		white-space: nowrap;
		flex: 1;
		overflow-x: auto;
	}

	.box_cc_xm_box {
		width: 150rpx;
		display: inline-flex;
		flex-direction: column;
	}

	.box_cc_xm_box_item {
		border-radius: 8rpx;
		line-height: 70rpx;
		height: 70rpx;
		background: #ffffff;
		margin-bottom: 10rpx;
		margin-right: 10rpx;
		text-align: center;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box_cc_xm_box_item.off {
		background-color: rgb(187, 187, 187);
	}

	.box_cc_xm_box_item.fb {
		font-weight: bolder;
		text-align: left;
		justify-content: flex-start;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.box_cc_xm_box_item text:nth-child(1) {
		font-size: 24rpx !important;
	}

	.box_cc_xm_box_item text {
		font-size: 26rpx;
		font-weight: 600;
		color: #222222;
	}

	.box_cc_xm_box_item text.yudin {
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #00B77F;
	}

	.box_cc_xm_box_item .lock {
		width: 32rpx;
		height: 32rpx;
	}

	.box_active {
		padding: 30rpx;
	}

	.box_active_title {
		display: flex;
		margin-bottom: 20rpx;
		justify-content: space-between;
	}

	.box_active_title text:nth-child(1) {
		font-size: 28rpx;
		font-weight: 400;
		color: #222222;
	}

	.box_active_title text:nth-child(2) {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.seizeAseat {
		height: 250rpx;
	}

	.box_active_footer {
		width: 100%;
		padding: 24rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		box-sizing: border-box;
		z-index: 10;
	}

	.box_active_footer_money {
		font-size: 32rpx;
		font-weight: 600;
		color: #4167C1;
		margin-left: 30rpx;
	}

	.box_active_footer_btn {
		box-sizing: border-box;
		width: 100%;
	}

	.box_active_footer_btn text {
		padding: 0 30rpx;
		font-size: 28rpx;
		display: inline-block;
		line-height: 66rpx;
		margin-right: 20rpx;
		height: 68rpx;
		border-radius: 34rpx;
		color: #333333;
		border: 1rpx solid #999999;
	}

	.box_active_footer_btn text.rightBtn {
		border: 1px solid #4167C1;
		color: #fff;
		background: #4167C1;
		margin-right: 0;
		margin-left: 20rpx;
	}

	.box_no {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		margin-top: 200rpx;
	}

	.box_no image {
		width: 360rpx;
		height: 188rpx;
	}

	.box_no text {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-top: 40rpx;
	}

	.box_active_content {
		width: 100%;
		background: #ffffff;
		white-space: nowrap;
		overflow-x: auto;
		box-sizing: border-box;
		padding-bottom: 18rpx;
	}

	.box_active_content_item {
		/* width: 178rpx; */
		min-width: 176rpx;
		margin-right: 20rpx;
		background: #FBBC26;
		border-radius: 4px;
		display: inline-block;
		overflow: hidden;
		border: 1px solid #FBBC26;
	}

	.box_active_content_item:last-of-type {
		margin-right: 0;
	}

	.box_active_content_item_name {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 12rpx;
		line-height: 34rpx;
		background: #FBBC26;
		display: flex;
		justify-content: space-between;
	}

	.box_active_content_item_time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		text-align: center;
		background-color: #fff;
		color: #FBBC26;
		border-radius: 0 0 4px 4px;
	}

	.box_active_content_item.yyd {
		background: #00B77F;
		border-color: #00B77F;
	}

	.box_active_content_item.yyd .box_active_content_item_name {
		background: #00B77F;
	}

	.box_active_content_item.yyd .box_active_content_item_time {
		color: #00B77F;

	}

	.smBox {
		display: flex;
		align-items: center;
		margin-bottom: 46rpx;
		&.wu {
			margin-bottom: 0;
		}
	}

	.smBox view {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-right: 80rpx;
		color: #333333;
	}

	.smBox view:last-of-type text {
		background: rgb(204, 204, 204);
	}

	.smBox view text {
		width: 32rpx;
		height: 32rpx;
		background: #4167C1;
		border-radius: 4rpx;
		display: inline;
		margin-right: 20rpx;
	}
</style>